<template>
	<view class="page">
		<pageTxt>
			<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<u-navbar title="客户详情" :autoBack="true" :fixed="false"></u-navbar>
					<view class="tab-box">
						<u-tabs
							:current="tabIndex"
							@click="tabClickFunc"
							:list="tablist"
							inactiveStyle="color: #919092;"
							activeStyle="color: #3B75FF;"
							lineColor="#3B75FF"
						></u-tabs>
					</view>
				</template>
				<!-- 内容 -->
				<view class="detail-content-box" v-if="userData">
					<template v-if="tabIndex == 0">
						<u-empty
							v-if="!$fieldShowFunc('11-khxx')"
							marginTop="300rpx"
							icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
							text=" "
						></u-empty>
						<view class="item-box" v-if="$fieldShowFunc('11-khxx')">
							<view class="title">客户信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_hybh')">
								<text class="txt">会员编号</text>
								<view class="content">{{ userData.member_id || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_khxm')">
								<text class="txt">客户姓名</text>
								<view class="content flex ac">{{ userData.name || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxfs')">
								<text class="txt">联系方式</text>
								<view class="content flex ac" @click="$callPhone(userData.phone)">
									<text class="iconfont icon-dianhua"></text>
									{{ userData.phone || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_nl')">
								<text class="txt">年龄</text>
								<view class="content flex ac">{{ userData.customer_age || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xb')">
								<text class="txt">性别</text>
								<view class="content flex ac">{{ userData.customer_sex == 1 ? '男' : '女' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_khsf')">
								<text class="txt">客户身份</text>
								<view class="content flex ac">
									<template v-if="userData.customer_identity == 1">老板</template>
									<template v-if="userData.customer_identity == 2">合伙人</template>
									<template v-if="userData.customer_identity == 3">项目负责人</template>
									<template v-if="!userData.customer_identity">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_khlx')">
								<text class="txt">客户类型</text>
								<view class="content flex ac">
									<template v-if="userData.customer_type == 1">VIP客户</template>
									<template v-if="userData.customer_type == 2">优质客户</template>
									<template v-if="userData.customer_type == 3">普通老客户</template>
									<template v-if="userData.customer_type == 4">优质新客户</template>
									<template v-if="userData.customer_type == 5">普通新客户</template>
									<template v-if="!userData.customer_type">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_hylx')">
								<text class="txt">会员类型</text>
								<view class="content flex ac">
									<template v-if="userData.member_type == 1">新会员</template>
									<template v-if="userData.member_type == 2">VIP会员</template>
									<template v-if="userData.member_type == 3">VVIP会员</template>
									<template v-if="!userData.member_type">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_qdly')">
								<text class="txt">渠道来源</text>
								<view class="content flex ac">
									<template v-if="userData.source == 1">品牌客户</template>
									<template v-if="userData.source == 2">电销</template>
									<template v-if="userData.source == 3">展会</template>
									<template v-if="userData.source == 4">转介绍</template>
									<template v-if="userData.source == 5">其他</template>
									<template v-if="!userData.source">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_khywfw')">
								<text class="txt">客户业务范围</text>
								<view class="content flex ac">{{ userData.business_area || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_dkgzd')">
								<text class="txt">对客关注度</text>
								<view class="content flex ac">
									<template v-if="userData.customer_attention == 1">持续重点关注</template>
									<template v-if="userData.customer_attention == 2">持续关注</template>
									<template v-if="userData.customer_attention == 3">定期关注</template>
									<template v-if="userData.customer_attention == 4">不定期关注</template>
									<template v-if="userData.customer_attention == 5">一般关注</template>
									<template v-if="!userData.customer_attention">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_mqjypp')">
								<text class="txt">目前经营品牌</text>
								<view class="content flex ac">
									{{ userData.current_operating_brand || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_cshgx')">
								<text class="txt">次社会关系</text>
								<view class="content flex ac">
									<template v-if="userData.secondary_social_relations == 1">品牌关系户</template>
									<template v-if="userData.secondary_social_relations == 2">我司关系户</template>
									<template v-if="userData.secondary_social_relations == 3">政府关系户</template>
									<template v-if="userData.secondary_social_relations == 4">一般关系</template>
									<template v-if="!userData.secondary_social_relations">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_khtd')">
								<text class="txt">客户态度</text>
								<view class="content flex ac">
									<template v-if="userData.customer_attitude == 1">积极主动</template>
									<template v-if="userData.customer_attitude == 2">沟通顺畅</template>
									<template v-if="userData.customer_attitude == 3">敷衍了事</template>
									<template v-if="userData.customer_attitude == 4">拒不配合</template>
									<template v-if="!userData.customer_attitude">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_ndkdjh')">
								<text class="txt">年度开店计划</text>
								<view class="content flex ac">
									<template v-if="userData.annual_store_opening_plan == 1">不连续少量开店</template>
									<template v-if="userData.annual_store_opening_plan == 2">不连续大量开店</template>
									<template v-if="userData.annual_store_opening_plan == 3">持续且少量开店</template>
									<template v-if="userData.annual_store_opening_plan == 4">持续且大量开店</template>
									<template v-if="!userData.annual_store_opening_plan">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_tznl')">
								<text class="txt">投资能力</text>
								<view class="content flex ac">
									<template v-if="userData.investment_capability == 1">100w以下</template>
									<template v-if="userData.investment_capability == 2">100-500w</template>
									<template v-if="userData.investment_capability == 3">500-1000w</template>
									<template v-if="userData.investment_capability == 4">1000w以上</template>
									<template v-if="!userData.investment_capability">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_glpp')">
								<text class="txt">关联品牌</text>
								<view class="content flex ac">
									{{ userData.brand_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_bz')">
								<text class="txt">备注</text>
								<view class="content flex ac">
									{{ userData.remark || '--' }}
								</view>
							</view>
						</view>
					</template>
					<template v-if="tabIndex == 1">
						<u-empty
							v-if="!userData.partner_list.length || !$fieldShowFunc('11-lxrxx')"
							marginTop="300rpx"
							icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
							text=" "
						></u-empty>
						<template v-if="$fieldShowFunc('11-lxrxx')">
							<view class="item-box" v-for="(item, index) in userData.partner_list" :key="index">
								<view class="title">联系人{{ index + 1 }}</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrxm')">
									<text class="txt">联系人姓名</text>
									<view class="content">{{ item.customer_name }}</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrlxfs')">
									<text class="txt">联系方式</text>
									<view class="content flex ac" @click="$callPhone(item.customer_phone)">
										<text class="iconfont icon-dianhua"></text>
										{{ item.customer_phone }}
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrsf')">
									<text class="txt">联系人身份</text>
									<view class="content flex ac">
										<template v-if="item.customer_identity == 1">老板</template>
										<template v-if="item.customer_identity == 2">合伙人</template>
										<template v-if="item.customer_identity == 3">项目负责人</template>
										<template v-if="!item.customer_identity">--</template>
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrdkgzd')">
									<text class="txt">对客关注度</text>
									<view class="content flex ac">
										<template v-if="item.customer_attention == 1">持续重点关注</template>
										<template v-if="item.customer_attention == 2">持续关注</template>
										<template v-if="item.customer_attention == 3">定期关注</template>
										<template v-if="item.customer_attention == 4">不定期关注</template>
										<template v-if="item.customer_attention == 5">一般关注</template>
										<template v-if="!item.customer_attention">--</template>
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrketd')">
									<text class="txt">客户态度</text>
									<view class="content flex ac">
										<template v-if="item.customer_attitude == 1">积极主动</template>
										<template v-if="item.customer_attitude == 2">沟通顺畅</template>
										<template v-if="item.customer_attitude == 3">敷衍了事</template>
										<template v-if="item.customer_attitude == 4">拒不配合</template>
										<template v-if="!item.customer_attitude">--</template>
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrndkdjh')">
									<text class="txt">年度开店计划</text>
									<view class="content flex ac">
										<template v-if="item.annual_store_opening_plan == 1">不连续少量开店</template>
										<template v-if="item.annual_store_opening_plan == 2">不连续大量开店</template>
										<template v-if="item.annual_store_opening_plan == 3">持续且少量开店</template>
										<template v-if="item.annual_store_opening_plan == 4">持续且大量开店</template>
										<template v-if="!item.annual_store_opening_plan">--</template>
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrmqjypp')">
									<text class="txt">目前经营品牌</text>
									<view class="content flex ac">
										{{ item.current_operating_brand }}
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrcshgx')">
									<text class="txt">次社会关系</text>
									<view class="content flex ac">
										<template v-if="item.secondary_social_relations == 1">品牌关系户</template>
										<template v-if="item.secondary_social_relations == 2">我司关系户</template>
										<template v-if="item.secondary_social_relations == 3">政府关系户</template>
										<template v-if="item.secondary_social_relations == 4">一般关系</template>
										<template v-if="!item.secondary_social_relations">--</template>
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrtznl')">
									<text class="txt">投资能力</text>
									<view class="content flex ac">
										<template v-if="item.investment_capability == 1">100w以下</template>
										<template v-if="item.investment_capability == 2">100-500w</template>
										<template v-if="item.investment_capability == 3">500-1000w</template>
										<template v-if="item.investment_capability == 4">1000w以上</template>
										<template v-if="!item.investment_capability">--</template>
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_lxrbz')">
									<text class="txt">备注</text>
									<view class="content flex ac">
										{{ item.remark }}
									</view>
								</view>
							</view>
						</template>
					</template>
					<template v-if="tabIndex == 2">
						<u-empty
							v-if="!$fieldShowFunc('11-khsj')"
							marginTop="300rpx"
							icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
							text=" "
						></u-empty>
						<view class="item-box" v-if="$fieldShowFunc('11-khsj')">
							<view class="title">客户数据</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_yqyxms')">
								<text class="txt">已签约项目数</text>
								<view class="content">{{ projectsStatData.signed_contracts_num }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_yqxs')">
								<text class="txt">已取消项目数</text>
								<view class="content flex ac">{{ projectsStatData.cancel_num }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_qyze')">
								<text class="txt">签约总额(元)</text>
								<view class="content">{{ projectsStatData.total_contract_price }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_jsze')">
								<text class="txt">结算总额(元)</text>
								<view class="content flex ac">{{ projectsStatData.total_final_settlement_amount }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_wjsze')">
								<text class="txt">未结算总额(元)</text>
								<view class="content">{{ projectsStatData.pending_settlement }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_zhqbb')">
								<text class="txt">综合签报比</text>
								<view class="content flex ac">{{ projectsStatData.comprehensive_quotation_ratio }}%</view>
							</view>
						</view>
					</template>
					<template v-if="tabIndex == 3">
						<u-empty v-if="!tableData.length" marginTop="300rpx" icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
						<view class="item-box" v-for="(item, index) in tableData" :key="index">
							<!-- <view class="title">项目数据</view> -->
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xmmc')">
								<text class="txt">项目名称</text>
								<view class="content">{{ item.project_name || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xmbh')">
								<text class="txt">项目编号</text>
								<view class="content flex ac">
									<text v-if="$isPer(per_arr, ['customerDetail_projectDetail'])" class="txt-btn" @click="navToProjectFunc(item)">
										{{ item.project_number || '--' }}
									</text>
									<text v-else>{{ item.project_number || '--' }}</text>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xmpp')">
								<text class="txt">项目品牌</text>
								<view class="content flex ac">{{ item.brand_name || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xmlx')">
								<text class="txt">项目类型</text>
								<view class="content flex ac">{{ item.store_type_name || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_kclx')">
								<text class="txt">勘场类型</text>
								<view class="content flex ac">{{ item.survey_site || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xmjd')">
								<text class="txt">项目进度</text>
								<view class="content flex ac">{{ item.display_status || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_ssq')">
								<text class="txt">省市区</text>
								<view class="content flex ac">{{ item.area || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xxdz')">
								<text class="txt">详细地址</text>
								<view class="content flex ac">{{ item.address || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_xmcjsj')">
								<text class="txt">项目创建时间</text>
								<view class="content flex ac">{{ item.created_at || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_ppjl')">
								<text class="txt">品牌经理</text>
								<view class="content flex ac">{{ item.channel_manager_name || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_khjl')">
								<text class="txt">客户经理</text>
								<view class="content flex ac">{{ item.account_manager_name || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_qybjb')">
								<text class="txt">签约报价比</text>
								<view class="content flex ac">{{ item.quotation_ratio ? item.quotation_ratio + '%' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_scbjje')">
								<text class="txt">首次报价金额</text>
								<view class="content flex ac">{{ item.system_quotation ? item.system_quotation + '元' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_zzbjje')">
								<text class="txt">最终报价金额</text>
								<view class="content flex ac">{{ item.quotation_amount ? item.quotation_amount + '元' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_htqyje')">
								<text class="txt">合同签约金额</text>
								<view class="content flex ac">{{ item.contract_price ? item.contract_price + '元' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_sjjsje')">
								<text class="txt">实际结算金额</text>
								<view class="content flex ac">{{ item.final_settlement_amount ? item.final_settlement_amount + '元' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_htkgrq')">
								<text class="txt">合同开工日期</text>
								<view class="content flex ac">{{ item.contract_commencement_date || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_htwgrq')">
								<text class="txt">合同完工日期</text>
								<view class="content flex ac">{{ item.contract_completion_date || '--' }}</view>
							</view>
							<view class="item-box-item flex jb">
								<text class="txt">合同工期</text>
								<view class="content flex ac">{{ item.contract_duration_days ? item.contract_duration_days + '天' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_sjkgrq')">
								<text class="txt">实际开工日期</text>
								<view class="content flex ac">{{ item.on_site_start_date || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_sjwgrq')">
								<text class="txt">实际完工日期</text>
								<view class="content flex ac">{{ item.actual_completion_date || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_sjgq')">
								<text class="txt">实际工期</text>
								<view class="content flex ac">{{ item.actual_construction_period ? item.actual_construction_period + '天' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_jswcsj')">
								<text class="txt">结算完成时间</text>
								<view class="content flex ac">{{ item.settlement_completion_date || '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_ysk')">
								<text class="txt">已收款</text>
								<view class="content flex ac">{{ item.paid_amount ? item.paid_amount + '元' : '--' }}</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('kh_dsk')">
								<text class="txt">待收款</text>
								<view class="content flex ac">{{ item.unpaid_amount ? item.unpaid_amount + '元' : '--' }}</view>
							</view>
						</view>
					</template>
				</view>
				<view class="bottom-btn-box flex ac jb" slot="bottom">
					<view style="width: 100%" v-if="!loading">
						<judgeBtn info :per_arr="per_arr" :btns="btns" :state="1" :item="userData" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
			<!-- 操作组件 -->
			<customerOperate :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></customerOperate>
		</pageTxt>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			userData: '',
			tabIndex: 0,
			tablist: [
				{
					name: '客户信息'
				},
				{
					name: '联系人信息'
				},
				{
					name: '客户数据'
				},
				{
					name: '项目数据'
				}
			],
			tableData: [],
			projectsStatData: {},
			per_arr: [],
			// 操作按钮
			btns: [
				{
					per_name: 'user_editMsg',
					state: 1,
					name: '编辑'
				},
				{
					per_name: 'user_del',
					state: 1,
					name: '删除'
				}
			],
			// 操作相关
			per_name: '',
			oper_item: {}
		};
	},
	onShow() {
		if (this.userData) {
			this.getUserDetail({
				user_id: this.userData.id
			});
		}
	},
	onLoad(option) {
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/customerManagement'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
		if (option.id) {
			this.getUserDetail({
				user_id: option.id
			});
			this.getUserProjectsList(option.id);
			this.getUserProjectsStat(option.id);
		} else {
			uni.showToast({
				title: '用户id错误',
				icon: 'error'
			});
		}
	},
	methods: {
		// 操作反馈
		handleSubmit(id) {
			var pages = getCurrentPages();
			var perPage = pages[pages.length - 2];
			setTimeout(() => {
				if (perPage) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			}, 500);
			this.$nextTick(() => {
				if (perPage && perPage.route == 'pagesA/saleManagement/saleManagement') {
					perPage.$vm.$refs.customerManagement.handleSubmit(id);
				}
			});
		},
		// 操作事件
		btnsChange(e) {
			console.log(e);
			this.per_name = e.per_name;
			this.oper_item = e.item;
		},
		onRefresh() {
			this.getUserDetail({
				user_id: this.userData.id
			});
			this.getUserProjectsList(this.userData.id);
			this.getUserProjectsStat(this.userData.id);
			this.$refs.paging.complete();
		},
		tabClickFunc(e) {
			this.tabIndex = e.index;
		},
		getUserDetail(data) {
			this.loading = true;
			this.$Apipc.getUserDetail(data).then((res) => {
				console.log(res, '用户详情');
				this.loading = false;
				if (res.code == 200) {
					this.userData = res.data;
				}
			});
		},
		// 客户项目列表
		getUserProjectsList(user_id) {
			this.$Apipc
				.getUserProjectsList({
					page: 1,
					num: 999,
					user_id
				})
				.then((res) => {
					console.log(res, '客户项目列表');
					if (res.code == 200) {
						this.tableData = res.data.list;
					}
				});
		},
		// 客户项目统计
		getUserProjectsStat(user_id) {
			this.$Apipc
				.getUserProjectsStat({
					user_id
				})
				.then((res) => {
					console.log(res, '客户项目统计');
					if (res.code == 200) {
						this.projectsStatData = res.data;
					}
				});
		},
		// 去项目详情
		navToProjectFunc(item) {
			uni.navigateTo({
				url: '/pagesB/projectDetail/projectDetail?id=' + item.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'customerDetail.scss';
</style>
